import React, { useState, useEffect } from 'react'
import { Table, Button, Popover, Switch, Modal,Tag } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'
const { confirm } = Modal

function RightList() {
  const [dataSource, setdataSource] = useState()
  const getdata = () => {
    axios.get('/rights?_embed=children').then((res) => {
      const list = res.data
      setdataSource(list)
    })
  }
  useEffect(() => {
    getdata()
  }, [])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
      width: '12%',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      width: '30%',
      key: 'key',
      render: (item) => {
        return (
          <Tag color='green'>
             {item}
        </Tag>
        )
      }
    },
    {
      title: '操作',
      width: '30%',
      key: 'operate',
      render: (item) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => confirmMethod(item)}
            />
            <Popover
              content={
                <div style={{ textAlign: 'center' }}>
                  <Switch
                    checked={item.pagepermisson}
                    onChange={() => switchMethod(item)}
                  ></Switch>
                </div>
              }
              title="Title"
            >
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                disabled={item.pagepermisson === undefined}
              />
            </Popover>
          </div>
        )
      },
    },
  ]

  const confirmMethod = (item) => {
    confirm({
      title: '你确定删除该项？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deletMethod(item)
      },
      onCancel() {},
    })
  }
  //更新/修改
  const switchMethod = (item) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1

    if (item.grade === 1) {
      axios
        .patch(`/rights/${item.id}`, {
          pagepermisson: item.pagepermisson,
        })
        .then((res) => {
          getdata()
        })
    } else {
      axios
        .patch(`http://localhost:5000/children/${item.id}`, {
          pagepermisson: item.pagepermisson,
        })
        .then((res) => {
          getdata()
        })
    }
  }
  //删除
  const deletMethod = (item) => {
    if (item.grade === 1) {
      axios
        .delete(`http://localhost:5000/rights/${item.id}`, {
          pagepermisson: item.pagepermisson,
        })
        .then((res) => {
          getdata()
        })
    } else {
      axios
        .delete(`http://localhost:5000/children/${item.id}`, {
          pagepermisson: item.pagepermisson,
        })
        .then((res) => {
          getdata()
        })
    }
  }
  return (
    <div>
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={{
          pageSize: 5,
        }}
      />
    </div>
  )
}
export default RightList
